<template>
    <div class="ym">
        <div class="main">
          <img class="topicimg" src="@/assets/img/picture/biao_xi.png" alt="">
          <div class="maincontent">
            <div @click="back" class="back">
                <div class="center">
                    <img src="@/assets/img/icon/forget_back.png" alt="">
                </div>
                返回
            </div>
            <div class="content">
                <div class="forgetpass">新用户注册</div>
                <div class="inputbox zhanghao" :class="errType.zhanghaoNull||errType.zhanghaoType?'err':''"><!--账号-->
                    <div class="center">
                      <img class="photo" src="@/assets/img/icon/forget_yzm.png" alt="">
                    </div>
                    <input class="yzmnum" v-model="registerData.userName" placeholder="请输入邮箱" type="text">
                    <div class="request">xxx@qq.com</div>
                </div>
                <div class="errPrompt" v-if="errType.zhanghaoNull">请输入邮箱</div>
                <div class="errPrompt" v-if="errType.zhanghaoType">邮箱格式错误</div>
                <div class="yzm" :class="nullYzm?'err':''">
                  <div class="center">
                      <img class="photo" src="@/assets/img/icon/forget_yzm.png" alt="">
                  </div>
                  <input v-model="yzmNum" class="yzmnum" placeholder="验证码" type="text">
                  <div v-show="!showYzm" class="countdown">{{time+'s后重新获取'}}</div>
                  <div v-show="showYzm" @click="getyzm" class="getyzm">获取验证码</div>
                </div>
                <!--第一个密码-->
                <div class="newpass inputbox" :class="errType.passNull0||errType.passType?'err':''">
                    <div class="center">
                      <img class="photo" src="@/assets/img/icon/forget_password.png" alt="">
                    </div>
                    <input v-model="registerData.password" placeholder="设置新密码" :type="showEye === true?'text':'password'">
                    <img @click="showPassword(0)" class="eye" v-if="showEye" src="@/assets/img/icon/login_openEye.png" alt="">
                    <img @click="showPassword(0)" class="eye" v-else src="@/assets/img/icon/login_closeEye.png" alt="">
                    <div class="request">密码要求8-16位，至少包含数字，字母，字符两种元素</div>
                </div>
                <div class="errPrompt" v-if="errType.passType">密码格式错误</div>
                <div class="errPrompt" v-if="errType.passNull0">请输入新密码</div>
                <div class="newpass inputbox" :class="errType.passNull1||errType.passErr?'err':''"><!--第二个密码-->
                    <div class="center">
                        <img class="photo" src="@/assets/img/icon/forget_password.png" alt="">
                    </div>
                    <input v-model="newPass1" placeholder="确认新密码" :type="showEye === true?'text':'password'">
                    <img @click="showPassword(1)" class="eye" v-if="showeye" src="@/assets/img/icon/login_openEye.png" alt="">
                    <img @click="showPassword(1)" class="eye" v-else src="@/assets/img/icon/login_closeEye.png" alt="">
                </div>
                <div class="errPrompt" v-if="errType.passErr">两次密码不一致</div>
                <div class="errPrompt" v-if="errType.passNull1">请确认新密码</div>
                <div class="errPrompt" v-if="errType.password">错误</div>
                <div class="yzmbox" :class="nullYzm?'err':''">
                  <input placeholder="请输入右边图片的答案" v-model="registerData.code" type="text">
                  <img @click="changeYzm" class="yzmcode" :src="yzmSrc" alt="">
                </div>
                <button @click="submit" class="submit">确定</button>
            </div>
          </div>
            
        </div>
    </div>
</template>

<style scoped lang="scss">
.ym{
    height: 100vh;
    background-color: #F2F4F7;
    display: flex;
    align-items: center;
    justify-content: right;
    background-image: url('@/assets/img/picture/background.jpg');
    background-size: 100% 100% ;
    .main{
        width: 540px;
        display: grid;
        margin-right: 150px;
        .topicimg{
          height: 90px;
          width: 75%;
          display: block;
          margin: 0 auto 30px;
        }
        .maincontent{
          background-color: white;
          border-radius: 15px;
          padding: 50px;
          position: relative;
          opacity: 0.9;
          .inputbox:hover input{
          border: 1px solid #3A8BFF;
          border-radius: 30px;
          }
          .err{
              border-color: #FF5152!important;
          }
          .errPrompt{
              font-size: 12px;
              color: #FF5152;
              padding-left: 24px;
          }
          input::placeholder{
              color: #91A0B5;
          }
          .back{
              position: absolute;
              display: flex;
              font-size: 14px;
              color: #91A0B5;
              top: 30px;
              left: 30px;
              line-height: 14px;
              img{
                  width: 14px;
                  height: 14px;
                  line-height: 16px;
                  margin-right: 4px;
              }
          }
          .service{
              position: absolute;
              top: 30px;
              right: 30px;
              font-size: 14px;
              color: #91A0B5;
          }
          .content{
              display: grid;
              position: relative;
              .yzm{
                height: 50px;
                border-radius: 25px;
                border: 1px solid #d4d6d9;
                display: flex;
                position: relative;
                margin-bottom: 24px;
                .countdown{
                  position: absolute;
                  font-size: 14px;
                  color: #9fa0a2;
                  right: 15px;
                  top: 15px;
                }
                .yzmnum{
                    flex: 1;
                    height: 50px;
                    padding: 0 130px 0 54px;
                    background: transparent;
                }
                .getyzm{
                    line-height: 50px;
                    position: absolute;
                    right: 24px;
                    color: #3A8BFF;
                }
                &:hover{
                    border: 1px solid #3A8BFF;
                }
                &:focus-within{
                    border: 1px solid rgb(30, 166, 234);
                }
              }
              .pass{
                height: 50px;
                border-radius: 25px;
                border: 1px solid #d4d6d9;
                display: flex;
                position: relative;
                margin-bottom: 24px;
                input{
                    flex: 1;
                    height: 100%;
                    padding: 0 24px;
                }
              }
              .yzmbox{
                display: flex;
                height: 48px;
                margin-bottom: 24px;
                border: 1px solid #d4d6d9;
                border-radius: 24px;
                align-items: center;
                input{
                    padding: 0 24px;
                    height: 100%;
                    flex: 1;
                    border-radius: 24px;
                }
                .yzmcode{
                    padding-left: 10px;
                    margin-right: 20px;
                    width: 96px;
                    height: 38px;
                }
                &:hover{
                    border: 1px solid #3A8BFF;
                }
                &:focus-within{
                  border: 1px solid rgb(30, 166, 234);
                }
              }
              .forgetpass{
                  color: #181E33;
                  font-size: 20px;
                  margin-top: 20px;
                  margin-bottom: 20px;
              }
              .zhanghao{
                  height: 50px;
                  border-radius: 25px;
                  border: 1px solid #d4d6d9;
                  display: flex;
                  position: relative;
                  margin-bottom: 24px;
                  .countdown{
                    position: absolute;
                    font-size: 14px;
                    color: #9fa0a2;
                    right: 15px;
                    top: 15px;
                  }
                  .yzmnum{
                      flex: 1;
                      height: 50px;
                      padding: 0 54px 0 54px;
                      background: transparent;
                      border: 1px solid #3A8BFF;
                      border-radius: 30px;
                  }
                  .getyzm{
                      line-height: 50px;
                      position: absolute;
                      right: 24px;
                      color: #3A8BFF;
                  }
              }
              .photo{
                  height: 18px;
                  width: 18px;
                  position: absolute;
                  top: 15px;
                  left: 20px;
              }
              .newpass{
                  display: flex;
                  position: relative;
                  border-radius: 25px;
                  border: 1px solid #d4d6d9;
                  margin-bottom: 24px;
                  input{
                      background: transparent;
                      height: 50px;
                      padding: 0 60px 0 54px;
                      width: 100%;
                  }
                  .eye{
                      width: 18px;
                      height: 18px;
                      position: absolute;
                      top: 17px;
                      right: 24px;
                  }
              }
              .request{
                  position: absolute;
                  font-size: 12px;
                  color: #A8A8B3;
                  padding-left: 24px;
                  line-height: 1;
                  bottom: -18px;
              }
              .submit{
                  width: 100%;
                  height: 50px;
                  border-radius: 25px;
                  background: linear-gradient(to right,rgb(125, 162, 246),rgb(70, 134, 245));
                  margin: 0 0 10px 0;
                  color: white;
                  font-size: 18px;
                  box-shadow: 0 3px 12px 0 rgba(39, 125, 255, 0.3);
              }
            }
        }
    }
}
</style>

<script>
import axios from 'axios'
import { mapState, mapGetters } from 'vuex'
import { apiGet, apiPost } from '@/assets/js/api'
export default {
  data () {
    return {
      showeye: false,
      showEye: false,
      newPass1: '',
      yzmSrc: '',
      nullYzm: false,
      yzmNum: '',
      registerData:{
        code: '',
        mailCode: '',
        password: '',
        userName: '',
        uuid: ''
      },
      errType: {
        zhanghaoNull: false,
        zhanghaoType: false,
        passType: false,
        passErr: false,
        passNull0: false,
        passNull1: false,
        password: false
      },
      showYzm: true,
      time: 60
    }
  },
  methods: {
    showPassword (index) {
      if (index === 1) {
        this.showeye = !this.showeye
      } else {
        this.showEye = !this.showEye
      }
    },
    submit () {
      const pass = /^(?:(?=.*[A-Za-z])(?=.*\d)|(?=.*[A-Za-z])(?=.*[!@#$%^&*])|(?=.*\d)(?=.*[!@#$%^&*]))[A-Za-z\d!@#$%^&*]{8,16}$/
      if (this.registerData.userName === '') {//没账号
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        this.errType.zhanghaoNull = true
      } else if (this.registerData.password === '') {//没第一个密码
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        this.errType.passNull0 = true
      } else if (this.registerData.password.length > 16 || this.registerData.password.length < 8 || !pass.test(this.registerData.password)) {//第一个密码错误
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        this.errType.passType = true
      } else if (this.newPass1 === '') {//没第二个密码
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        this.errType.passNull1 = true
      } else if (this.registerData.password !== this.newPass1) {//第二个密码和第一个密码不一样
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        this.errType.passErr = true
      } else {// 注册成功
        Object.keys(this.errType).forEach(key => this.errType[key]=false);
        axios.post('http://localhost:8081/api/userregister',{
          'user_account': this.zhanghaoNum,
          'user_password': this.newPass0
        }).then(res => {
          if(res.data.code === 200){
            this.$router.push({name: 'login', query:{phoneNumber: this.zhanghaoNum}})
          }else {
            this.errType.password = true
          }
        }).catch(err => {
          console.error(err)
        })
      }
    },
    toShowList () {
      this.showList = true
    },
    back () {
      this.$router.back()
    },
    getyzm () {
      const params = new URLSearchParams();
      params.append('mail', this.registerData.userName);
      apiPost('/nps/register/setMail', params).then(res => {
        console.log(res, this.registerData.userName);
        if(res.code === 200){
          this.showYzm = false
          const timer = setInterval(() => {
            if (this.time === 0) {
              clearInterval(timer)
              this.showYzm = true
            }
            this.time -= 1
          }, 1000)
        }
      })
      
    },
    changeYzm(){
      apiGet('/captchaImage').then(res => {
        // 解码 Base64 内容
        const binaryString = atob(res.img);
        const length = binaryString.length;
        const bytes = new Uint8Array(length);
        
        // 将每个字符转换为字节
        for (let i = 0; i < length; i++) {
            bytes[i] = binaryString.charCodeAt(i);
        }
        
        // 创建一个 Blob 对象
        const blob = new Blob([bytes], { type: "image/png" }); // 根据实际图片类型修改
        const imageUrl = URL.createObjectURL(blob);
        this.yzmSrc = imageUrl;
        this.registerData.uuid = res.uuid
      })
    },
    handleClickOutside (event) {
      const phoneList = this.$refs.phoneList
      if (phoneList !== event.target && this.showList === true) {
        this.showList = false
        this.SEARCH = ''
      }
    },
  },
  computed: {
    ...mapState('PhoneAreaNum', ['country']),
    ...mapGetters('PhoneAreaNum', ['searchCountry'])
  },
  created() {
    this.changeYzm()
  },
  beforeUnmount() {
    document.removeEventListener('click', this.handleClickOutside)
  },
  mounted() {
    document.addEventListener('click', this.handleClickOutside)
  }
}
</script>
